.help-docs-page {
  padding: 24px;

  .search-section {
    margin-bottom: 24px;
  }

  .content-section {
    display: flex;
    gap: 16px;
    height: calc(100vh - 300px);
    min-height: 600px;

    .doc-list-section {
      flex: 0 0 400px;
      overflow-y: auto;

      :global(.ant-card-body) {
        padding: 16px;
        height: 100%;
        overflow-y: auto;
      }

      :global(.ant-list-item) {
        transition: all 0.3s;
      }
    }

    .doc-detail-section {
      flex: 1;
      overflow-y: auto;

      :global(.ant-card-body) {
        padding: 24px;
        height: 100%;
        overflow-y: auto;
      }

      .doc-content {
        .doc-html-content {
          line-height: 1.8;
          color: #333;

          :global {
            h1, h2, h3, h4, h5, h6 {
              margin-top: 24px;
              margin-bottom: 16px;
              font-weight: 600;
            }

            p {
              margin-bottom: 16px;
            }

            ul, ol {
              margin-bottom: 16px;
              padding-left: 24px;
            }

            li {
              margin-bottom: 8px;
            }

            img {
              max-width: 100%;
              height: auto;
              margin: 16px 0;
            }

            a {
              color: #1890ff;
              text-decoration: none;

              &:hover {
                text-decoration: underline;
              }
            }

            code {
              background: #f5f5f5;
              padding: 2px 6px;
              border-radius: 3px;
              font-family: 'Monaco', 'Consolas', monospace;
            }

            pre {
              background: #f5f5f5;
              padding: 16px;
              border-radius: 4px;
              overflow-x: auto;
              margin-bottom: 16px;

              code {
                background: transparent;
                padding: 0;
              }
            }

            blockquote {
              border-left: 4px solid #1890ff;
              padding-left: 16px;
              margin: 16px 0;
              color: #666;
            }

            table {
              width: 100%;
              border-collapse: collapse;
              margin: 16px 0;

              th, td {
                border: 1px solid #e8e8e8;
                padding: 8px 12px;
                text-align: left;
              }

              th {
                background: #fafafa;
                font-weight: 600;
              }
            }
          }
        }
      }
    }
  }
}

@media (max-width: 768px) {
  .help-docs-page {
    .content-section {
      flex-direction: column;
      height: auto;

      .doc-list-section {
        flex: 1;
        max-height: 400px;
      }

      .doc-detail-section {
        flex: 1;
        max-height: 600px;
      }
    }
  }
}

